<script setup>
// 使用 app.config.ts 中的配置
const appConfig = useAppConfig()

// 页面标题
useHead({
  title: `关于我们 - ${appConfig.app.name}`
})
</script>

<template>
  <div class="about-page">
    <a-card :title="`关于 ${appConfig.app.name}`" style="margin: 20px;">
      <a-descriptions :column="1" bordered>
        <a-descriptions-item label="项目名称">{{ appConfig.app.name }}</a-descriptions-item>
        <a-descriptions-item label="技术栈">Nuxt 4.x + Ant Design Vue + TypeScript</a-descriptions-item>
        <a-descriptions-item label="项目描述">
          {{ appConfig.app.description }}
        </a-descriptions-item>
        <a-descriptions-item label="版本信息">
          v{{ appConfig.app.version }}
        </a-descriptions-item>
        <a-descriptions-item label="主要功能">
          <a-tag color="blue">文章发布</a-tag>
          <a-tag color="green">搜索功能</a-tag>
          <a-tag color="orange">评论系统</a-tag>
          <a-tag color="purple">用户管理</a-tag>
        </a-descriptions-item>
      </a-descriptions>
      
      <a-divider />
      
      <a-space direction="vertical" size="large" style="width: 100%;">
        <h3>联系我们</h3>
        <a-form layout="vertical">
          <a-form-item label="姓名">
            <a-input placeholder="请输入您的姓名" />
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input placeholder="请输入您的邮箱" />
          </a-form-item>
          <a-form-item label="留言">
            <a-textarea placeholder="请输入您的留言" :rows="4" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </a-space>
    </a-card>
  </div>
</template>

<style scoped>
.about-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>
